<template>
  <div class="page">
    <el-button @click="show = !show">Toggle</el-button>

    <el-button @click="fn1">获取数据</el-button>

    <!-- 容器 -->
    <div v-if="show" ref="boxRef" class="box"></div>
  </div>
</template>

<script>
import * as echarts from "echarts/core";
// 图表类型
import { BarChart, LineChart } from "echarts/charts";

// 组件
import {
  TitleComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
// 渲染方式
import { CanvasRenderer } from "echarts/renderers";

// 注册单独引入的一些模块
echarts.use([
  LineChart,
  BarChart,
  LegendComponent,
  CanvasRenderer,
  TitleComponent,
  GridComponent,
]);

export default {
  data() {
    return {
      show: true,
    };
  },

  methods: {
    fn1() {
      const data = [15, 30, 46, 20, 20, 30];
      this.chart.setOption({
        series: [
          {
            name: "销量1",
            data,
          },
        ],
      });
    },

    handleResize() {
      this.chart.resize();
    },

    initChart() {
      // 创建实例
      this.chart = echarts.init(this.$refs.boxRef);
      // 设置配置
      this.chart.setOption({
        legend: {},
        // 全局调色盘
        // color: ["red", "green"],

        title: {
          text: "ECharts 入门示例",
        },
        // grid: {
        //   show: true,
        //   borderColor: "red",
        // },
        // tooltip: {}, // 工具，鼠标放上的效果
        xAxis: {
          // xAxis 默认是类目轴
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "red",
          },
        },
        yAxis: {
          // yAxis 默认是数值轴
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            color: "green",
          },
        },
        series: [
          // 系列数据
          {
            name: "销量1", // 系列名称
            type: "bar", // 系列类型
            data: [], // 系列数据
            // color: ["red", "green"],
            label: {
              show: true,
              color: "red",
            },
            itemStyle: {
              color: "#000",
            },
            emphasis: {
              itemStyle: {
                color: "red",
              },
              label: {
                color: "#000",
              },
            },
          },
          {
            name: "销量2", // 系列名称
            type: "line", // 系列类型
            data: [5, 20, 36, 10, 10, 20], // 系列数据
          },
        ],
      });
    },
  },

  watch: {
    show: {
      handler(value) {
        if (value) {
          this.initChart();
        } else {
          this.chart.dispose(); // 销毁Echarts实例
        }
      },
      // immediate: true,
      flush: "post",
    },
  },

  mounted() {
    this.initChart();
    window.addEventListener("resize", this.handleResize);
  },

  beforeUnmount() {
    window.removeEventListener("resize", this.handleResize);
    // ECharts 实例的销毁
    this.chart.dispose();
  },
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #fff;
}

.box {
  width: 100%;
  height: 400px;
}
</style>
